<template>
    <div class="scenics">
        <!-- 区域 -->
        <div class="area_wrap">
            <div class="area_label">区域:</div>
            <div class="area_content">
                <div class="area_content_wrap" ref="area">
                    <span v-for="(item) in scenics" :key="item.id">{{ item.name }}</span>
                </div>
                <div class="fold_area" @click="handleHold">
                    <i class="el-icon-d-arrow-right"></i>
                    等{{scenics.length}}个区域
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["scenics"],
    data() {
        return {
            isHold: false,
        };
    },
    methods: {
        handleHold() {
            if (!this.isHold) {
                this.$refs.area.style.height = "auto";
                this.isHold = !this.isHold;
            } else {
                this.$refs.area.style.height = "48px";
                this.isHold = !this.isHold;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.scenics {
    .area_wrap {
        display: flex;
        font-size: 14px;
        .area_label {
            width: 50px;
        }
        .area_content {
            flex: 1;
            .area_content_wrap {
                height: 48px;
                overflow: hidden;
            }
            span {
                padding-right: 8px;
                line-height: 1.6;
            }
            .fold_area {
                margin-top: 10px;
                cursor: pointer;
                i {
                    color: orange;
                    transform: rotate(90deg);
                    &.active {
                        transform: rotate(-90deg);
                    }
                }
            }
        }
    }
}
</style>
